<template>

  <div>


    <!-- 1. 添加学校 -->
    <el-button @click="addSchoolHandler" type="primary">添加学校</el-button>
    <!-- 2. 展示已有学校 -->
    <el-table :data="schoolListRef" style="margin: 20px 0">
      <el-table-column type="index" label="索引" width="100">
        <template #default="scope">
          {{ scope.$index + 1 + sizeRef * (nowPageRef - 1) }}
        </template>
      </el-table-column>
      <el-table-column label="学校名称" prop="schoolname"></el-table-column>
      <el-table-column label="操作" prop="op" width="200">
        <template #default="scope">
          <el-button size="small" type="primary" @click="updateSchoolHandler(scope.row)">修改</el-button>
          <!-- <el-popconfirm
          title="Are you sure to delete this?"
          @confirm="delSchool(scope.row._id)"
        >
          <template #reference>
            <el-button size="small" type="danger">删除</el-button>
          </template>
  </el-popconfirm> -->
          <el-button size="small" type="danger" @click="delSchoolHandler(scope.row._id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 3. 翻页展示 -->
    <el-pagination layout="total, sizes, prev, pager, next, jumper" v-model:current-page="nowPageRef"
      v-model:page-size="sizeRef" :page-sizes="[5, 10, 20, 50]" :total="totalRef"></el-pagination>
    <!-- 4. 弹窗 添加/修改学校 -->
    <el-dialog v-model="dialogRef" :title="titleRef" @close="close">
      <!-- 学校表单 -->
      <el-form :model="schoolForm" :rules="formRules" ref="formEle">
        <el-form-item label="学校名称" prop="schoolname">
          <!-- 学校名称 -->
          <el-input v-model="schoolForm.schoolname"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="addOrEdit">确定</el-button>
        <el-button @click="close">取消</el-button>
      </template>
    </el-dialog>

  </div>
</template>

<script setup lang="ts">
//@ts-ignore
import type { School } from "@/types/school"
import { useAddAndUpdateSchool } from "./useAddAndUpdate"
import { useShowSchool } from "./useShowSchool"
//@ts-ignore
import { reqDelSchool } from "@/api/reqSchool"
import { ElMessage, ElMessageBox } from "element-plus"

const { schoolListRef, changeRef, sizeRef, nowPageRef, totalRef } =
  useShowSchool()

const {
  dialogRef,
  formRules,
  titleRef,
  schoolForm,
  formEle,
  close,
  addOrEdit,
  addSchoolHandler,
  updateSchoolHandler,
} = useAddAndUpdateSchool(changeRef)

// 删除
const delSchool = async (_id: string) => {
  const { msg, status } = await reqDelSchool(_id)
  if (status === 0) {
    ElMessage.success("删除成功")
    changeRef.value = Symbol()
    // totalRef.value--
  } else {
    return Promise.reject(msg)
  }
}
const delSchoolHandler = async (_id: string) => {
  //   console.log(_id)
  try {
    await ElMessageBox.confirm("你确定要删除这个学校么", "Warning", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
    await delSchool(_id)
  } catch (error) {
    ElMessage.error(error as string)
    // console.log(error)
  }
}
</script>

<style></style>
